<script setup lang="ts">
// 引用其他vue对象文件
import { onMounted, onUpdated, ref } from "vue";
// 导入路由
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();

onMounted(() => {
  console.log(
    "生命周期--onMounted(Page2.vue)" +
      route.path +
      "<-->" +
      route.fullPath +
      "<-->"
  );
  // 注册窗口大小变化
});
onUpdated(() => {
  console.log(
    "生命周期--onUpdated(App.vue)" +
      route.path +
      "<-->" +
      route.fullPath +
      "<-->"
  );
});
</script>
<!-- template 加载前，隐藏内容 -->
<template>
  <label class="app-label2">跳转后的路由</label>
  <div class="app-root">
    <RouterLink to="/" class="app-label2">跳转后的路由</RouterLink>
  </div>
  <RouterView> </RouterView>
</template>

<style scoped>
.app-root {
  width: 100vw;
  height: 100vh;
  background-color: aliceblue;
  display: flex;
  flex-direction: column;
}
.app-label2 {
  width: 400px;
  height: auto;
  color: #333333;
  font-size: 16px;
  font-weight: 400;
  background-color: antiquewhite;
}
</style>
